<script setup lang='ts'>
import { ThemeEnum } from '@/models/app.context';
import { appRef } from '@/models/app.ref';
import { MdPreview } from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';

/**
 * Markdown 全局统一风格 Markdown 文本显示 
 * source     - 格式文本
 * reverse    - 主题反向，用于浅色背景
 * previewTheme 主题  'default' | 'github' | 'vuepress' | 'mk-cute' | 'smart-blue' | 'cyanosis'
 */
withDefaults(defineProps<{ source: string, reverse?: boolean, previewTheme: 'default' | 'github' | 'vuepress' | 'mk-cute' | 'smart-blue' | 'cyanosis' }>(), {
  previewTheme: 'default'
})

</script>
<template>
  <MdPreview :model-value="source"
    :theme="reverse ? appRef.theme === ThemeEnum.Dark ? ThemeEnum.Light : ThemeEnum.Dark : appRef.theme"
    :previewTheme="previewTheme" />
</template>
<style lang='scss' scoped></style>